<template>

  <div class="card">
    <wangEditor />
  </div>

  <div class="_pageContent">
    <!-- 添加 -->
    <div class="_operation_add">
      <div>
        <h3>轮播图设置</h3>
      </div>
      <div style="display: flex;flex-direction: row;gap: 10px;">
        <a-button type="primary" @click="addRecord">添加轮播图</a-button>
      </div>
    </div>

    <a-table :data="data">
      <template #columns>
        <a-table-column title="图片url" data-index="imageUrl" align="center">
          <template #cell="{ record }">
            <img :src="imgUrl + record.imageUrl" style="width: 200px;height: 100px;">
          </template>
        </a-table-column>
        <a-table-column title="标题" data-index="title" align="center"></a-table-column>
        <a-table-column title="排序号" data-index="sortOrder" align="center"></a-table-column>
        <a-table-column title="操作" data-index="operation" align="center">
          <template #cell="{ record }">
            <div class="_operation_wrapper">
              <span class="_operation_edit" @click="editRecord(record)">编辑</span>
              <span class="_operation_delete" @click="deleteRecord(record)">删除</span>
            </div>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>

  <div class="card" style="margin-top: 20px;">
    <h3>学习时长限制</h3>
    <div style="display: flex;flex-direction: row;align-items: center;gap: 10px;justify-content: space-between;">
      <div style="display: flex;flex-direction: row;align-items: center;gap: 10px;">
        <a-input v-model="durationData.minuteNumber" style="width: 100px;" />
        <div>分钟</div>
      </div>
      <a-button @click="updateDurationData" type="primary" status="warning">修改</a-button>
    </div>
  </div>

  <!-- 新增 or 修改 -->
  <a-modal :visible="visible" :title="title" @ok="handleOk" @cancel="visible = false">
    <a-form :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }" ref="formRef" :rules="rules">
      <a-form-item label="图片" prop="imageUrl">
        <a-upload name="file" :action="url + '/file/upload'" :show-upload-list="false" accept="image/*"
          :show-file-list="false" @success="imgSuccess">
          <template #upload-button>
            <img v-if="form.imageUrl" :src="imgUrl + form.imageUrl" style="width: 200px;height: 100px;">

            <div v-else
              style="color: #999;height: 100px;width: 100px;display: flex;align-items: center;justify-content: center;border: 1px dashed #999;">
              上传封面</div>
          </template>
        </a-upload>
      </a-form-item>
      <a-form-item label="标题" prop="title" field="title">
        <a-input v-model="form.title" />
      </a-form-item>
      <a-form-item label="排序号" prop="sortOrder" field="sortOrder">
        <a-input v-model="form.sortOrder" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { postCarouselList, addCarousel, updateCarousel, deleteCarousel } from "../../../api/carousel";
import { Message, Modal } from "@arco-design/web-vue";
import { getTitleList, updateTitleList } from "../../../api/platform";
import { ref, onMounted } from "vue";
import wangEditor from "../../components/wangEditor.vue";
import { getDuration, updateDuration } from "../../../api/duration";
import { postVideoList } from "../../../api/video";

// 表单验证
const formRef = ref(null);
const rules = {
  title: [{ required: true, message: '请输入标题' }],
  linkUrl: [{ required: true, message: '请输入跳转链接' }],
  sortOrder: [{ required: true, message: '请输入排序号' }, {
    validator: (value, callback) => {
      if (isNaN(Number(value))) {
        callback('经度必须为数字');
      } else {
        callback();
      }
    },
  }],
  status: [{ required: true, message: '请选择状态' }],
}

// 图片地址
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
// 地址
const url = import.meta.env.VITE_APP_API_URL;
// 新增 or 修改
const visible = ref(false);
// 表单数据
const form = ref({})
// 标题
const title = ref(null);
// 获取平台信息
const platformInfo = ref({})

const getPlatformInfo = () => {
  getTitleList({}).then(res => {
    platformInfo.value = res.data[0].content;
  })
}

//tabel数据
const data = ref([
  {
    username: "admin",
    gender: "male",
    phone: "13800138000",
    is_auth: "是",
    is_shop_auth: "是",
  },
]);

//获取数据
function getList() {
  postCarouselList({}).then(res => {
    data.value = res.data;
  })
}
// 图片上传成功
function imgSuccess(res) {

  const { response } = res;
  form.value.imageUrl = response.data;
}
//编辑
function editRecord(record) {
  title.value = '编辑';
  form.value = JSON.parse(JSON.stringify(record));
  visible.value = true;

}
//删除
function deleteRecord(record) {
  Modal.info({
    title: '提示',
    content: '确定删除该数据吗？',
    closable: true,
    onOk: () => {
      deleteCarousel({ carouselId: record.carouselId }).then(res => {
        if (res.code === 200) {
          Message.success('删除成功');
          getList();
        }
      })
    }
  })
}
// 新增
function addRecord() {
  form.value = {};
  title.value = '新增';
  visible.value = true;
}

// 确定
function handleOk() {
  if (form.value.imageUrl == null) {
    return Message.error('请上传图片');
  }
  formRef.value.validate().then(res => {
    if (!res) {
      if (title.value === '新增') {
        form.value = { ...form.value, createUserId: 1 };
        addCarousel(form.value).then(res => {
          if (res.code === 200) {
            Message.success('添加成功');
            getList();
          }
        })
      } else {
        updateCarousel(form.value).then(res => {
          if (res.code === 200) {
            Message.success('修改成功');
            getList();
          }
        })
      }
      visible.value = false;
    }
  })
}

const durationData = ref({});

// 获取学习时长限制
function getDurationData() {
  getDuration().then(res => {
    durationData.value = res.data;
  })
}

// 修改学习时长限制
function updateDurationData() {
  let count = 0;
  postVideoList({}).then(res => {
    res.data.forEach(item => {
      count += item.length
    })

    updateDuration(durationData.value).then(res=>{
    if(res.code === 200){
      Message.success('修改成功');
      getDurationData();
    }
  })
  });
  
  
}
onMounted(() => {
  getList();
  getPlatformInfo();
  getDurationData();
});

</script>
<style scoped>
.card {
  background-color: white;
  padding: 10px 20px;
  margin-bottom: 20px;
  border-radius: 20px;

}

._operation_wrapper {
  display: flex;
  gap: 10px;
}

._operation_edit {
  color: #4588ff;
  cursor: pointer;
}

._operation_delete {
  color: #ff6a36;
  cursor: pointer;
}

._operation_add {
  margin-bottom: 10px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>